<!-- 创建时间: 2019年10月22日 星期二 19:35 用户预约订单组件 -->
<template>
    <div class="CubeBookingOrder_container">
        <div class="container">
            <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td>车主</td>
                        <td>{{ cubeInfo.userName }}</td>
                    </tr>
                    <tr>
                        <td>会员等级</td>
                        <td>{{ cubeInfo.cubeLibraryUserInfo.Grade }}</td>
                    </tr>
                    <tr>
                        <td>车牌号</td>
                        <td>{{ cubeInfo.selectLicensePlateNumber }}</td>
                    </tr>
                    <tr>
                        <td>车位号</td>
                        <td>{{ cubeInfo.cubeLibraryNumber + "-" + cubeInfo.selectRegion + "-" + cubeInfo.showArrangement + "-" + cubeInfo.selectParking }}</td>
                    </tr>
                    <tr>
                        <td>地址</td>
                        <td>{{ cubeInfo.cubeLibraryAddress }}</td>
                    </tr>
                    <tr>
                        <td>预约时间</td>
                        <td>{{ cubeInfo.currnetOrderTime }}</td>
                    </tr>
                    <tr>
                        <td>预约计时</td>
                        <td>{{ cubeInfo.cubeLibraryUserInfo.WaitFor + "分" }}</td>
                    </tr>
                    <tr>
                        <td>预约费用</td>
                        <td>{{ cubeInfo.cubeLibraryUserInfo.BookingFee }}</td>
                    </tr>
                    <tr>
                        <td>计价</td>
                        <td>{{ cubeInfo.cubeLibraryUserInfo.Price + "/时"}}</td>
                    </tr>
                    <tr class="payment">
                        <td>支付方式</td>
                        <td>
                            <a href="#" class="active">
                                <span class="mui-icon-extra mui-icon-extra-alipay"></span>
                            </a>
                            <a href="#">
                                <span class="mui-icon mui-icon-weixin"></span>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" v-if="!cubeInfo.cubeLibraryUserInfo.Grade">
                            <button
                                type="button"
                                class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined"
                                @click="payBooking"
                            >支付预约费</button>
                        </td>
                        <td colspan="2" v-if="cubeInfo.cubeLibraryUserInfo.Grade">
                            <button
                                type="button"
                                class="mui-btn mui-btn-success mui-btn-block mui-btn-outlined"
                                @click="booking"
                                ref="bookingBtn"
                            >确认预约</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const Base64 = require("js-base64").Base64;
import md5 from "js-md5";
import mui from "../../lib/MUI/dist/js/mui.js";
import error from "../../js/error";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    beforeRouteLeave(to, from, next) {
        if (to.name === "CubeInfo") {
            sessionStorage.setItem(
                "returncubeinfo",
                JSON.stringify(this.$route.query)
            );
        }
        next();
    },
    data() {
        //这里存放数据
        return {
            cubeInfo: this.$route.query
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 创建订单号 和 订单信息
        createOrder_body() {
            // 生产订单编号 车位号(编码) + 时间戳 + 随机数
            var time = new Date().toString();
            var random = (
                parseInt(Math.random() * (99999 - 10000)) + 10000
            ).toString();
            var res = md5(time + random);

            var url = window.location.origin + "#/BookingInfo";

            var body = {
                // 异步返回参数
                userName: this.cubeInfo.userName, //车主
                plateNumber: this.cubeInfo.selectLicensePlateNumber, //车牌号
                bookingTime: this.cubeInfo.currnetOrderTime, //预约时间
                memberGrade: this.cubeInfo.cubeLibraryUserInfo.Grade, //会员等级
                waitFor: this.cubeInfo.cubeLibraryUserInfo.WaitFor, //等待时间
                cubeLibraryAddress: this.cubeInfo.cubeLibraryAddress, // 地址
                tradeNo: res, //订单号
                CallID: 1,
                Return_url: url,
                //预约车位
                bookingParking:
                    this.cubeInfo.cubeLibraryNumber +
                    "-" +
                    this.cubeInfo.selectRegion +
                    "-" +
                    this.cubeInfo.showArrangement +
                    "-" +
                    this.cubeInfo.selectParking
            };
            return body;
        },

        payBooking() {
            var order_body = this.createOrder_body();
            var info = {
                WIDout_trade_no: order_body.tradeNo,
                WIDtotal_amount: this.cubeInfo.cubeLibraryUserInfo.BookingFee,
                WIDsubject: "立方库车位预约系统",
                WIDbody: Base64.encode(JSON.stringify(order_body))
            };

            this.$http.post("pay", { info: JSON.stringify(info) }).then(
                response => {
                    if (response.body != "") {
                        this.$store.commit("setPayForm", response.body);
                        this.$router.push({
                            path: "/CubePage/CubePay"
                        });
                    }
                },
                response => {
                    error(response.status, this);
                }
            );
        },
        booking() {
            var order_body = this.createOrder_body();
            this.$refs.bookingBtn.setAttribute("disabled", "disabel");
            this.$refs.bookingBtn.innerText = "预约中...";
            this.$http
                .post("memberBooking", {
                    body: Base64.encode(JSON.stringify(order_body))
                })
                .then(
                    response => {
                        if (response.bodyText != "") {
                            this.$router.push({
                                path: "/BookingInfo"
                                // query: { tradeNo: Base64.decode(response.bodyText) }
                            });
                        }
                    },
                    response => {
                        error(response.status, this);
                    }
                );
        },
        checkUser() {
            if (this.cubeInfo.cubeLibraryUserInfo.Grade == undefined) {
                this.$router.go(-1);
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.checkUser();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        var active = null;
        mui(".payment").on("tap", "a", function() {
            if (!active) {
                this.classList.add("active");
                active = this;
            } else {
                active.classList.remove("active");
                this.classList.add("active");
                active = this;
            }
        });
    }
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.CubeBookingOrder_container {
    margin-top: 45px;
    position: relative;
    table {
        button {
            padding: 6px 0px;
            margin-bottom: 0px;
        }
        a {
            margin: 3px;
            width: 50px;
            height: 50px;
            display: inline-block;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            color: gray;
            span {
                margin-top: 12px;
            }
        }
        a.active {
            color: #007aff;
        }
        tr.payment td:nth-child(2) {
            padding: 0px;
        }
    }
}
</style>